<template>
  <ol class="music-list" v-if="musiclist.length > 0">
    <li
      v-for="(music, index) in musiclist"
      :key="music.id + index + music.name"
    >
      <!-- {{music.name}} {{music.song.alias[0]}} -->

      <i v-if="shownum" :class="['num', { red: index + 1 < 4 }]"
        >{{ index + 1 < 10 ? "0" + (index + 1) : index + 1 }}
      </i>

      <div class="left">
        <div class="name">
          <!-- <b>
            {{ music.name | highLight(keyword) }}
          </b> -->
          <p v-html="$options.filters.highLight(music.name, keyword)"></p>

          <span v-if="music.song.alias.length > 0"
            ><i v-for="(alias, i) in music.song.alias" :key="i + alias">
              ({{ alias }})
            </i>
          </span>
        </div>
        <!-- 第二行显示 -->
        <div :class="['artist', { sq: music.song.privilege.maxbr > 320000 }]">
          <span
            v-for="(artist, num) in music.song.artists"
            :key="artist.id + num + artist.name"
            v-html="$options.filters.highLight(artist.name, keyword)"
          >
            <!-- {{ artist.name }} -->
          </span>
          -
          <span
            v-html="$options.filters.highLight(music.song.album.name, keyword)"
          ></span>
          <!-- - {{ music.song.album.name }} -->
        </div>
      </div>
      <!-- 通过自定义属性反向传值 -->
      <!-- animate__pulse -->
      <!-- 判断正在播放的音乐，正在播放的音乐id==循环的音乐对象的id，那么显示播放样式 -->
      <div
        v-if="currentmusic && currentmusic.id == music.id"
        class="right-btn"
        style="background-image: none"
      >
        <load-animate :showtext="false"></load-animate>
      </div>
      <div v-else class="right-btn" @click.stop="$emit('play', music)"></div>
    </li>
  </ol>
</template>

<script>
import LoadAnimate from "./LoadAnimate.vue";
export default {
  components: { LoadAnimate },
  props: {
    currentmusic: {
      type: Object,
      default: () => {
        return null;
      },
    },
    musiclist: {
      type: Array,
      default: () => {
        return [];
      },
    },

    shownum: {
      type: Boolean,
      default: false,
    },
    keyword: {
      type: String,
      default: "",
    },
  },
  methods: {},
  mounted() {
    console.log(this.currentmusic);
  },
  filters: {
    highLight(value, keyword) {
      //把字符串里面的 关键词 替换成 <i "color:skyblue;">${keyword}</i>
      return value.replace(keyword, `<i style="color:skyblue">${keyword}</i>`);
    },
  },
};
</script>

<style lang="scss" scoped>
.music-list {
  font-weight: normal;
  li {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f2f2f252;
    padding: 9px 10px 8px 0;
    margin-left: 10px;
    position: relative;
    .num {
      font-size: 17px;
      color: #999;
      margin-right: 10px;
      font-weight: normal;
    }
    .red {
      color: #df3436;
    }
    .left {
      flex: 1;
      height: 100%;
      .name {
        height: 25px;
        font-size: 17px;
        display: flex;
        p {
          height: 25px;
          white-space: nowrap;
        }
        span {
          i {
            color: #999;
            width: 65% !important;
            display: inline-block;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
      .artist {
        font-size: 12px;
        padding-top: 8px;
        color: #999;
        padding-right: 10px;
        span {
          // overflow: hidden;
          // white-space: nowrap;
          // text-overflow: ellipsis;
          padding-right: 5px;
        }
        &.sq::before {
          content: "";
          display: inline-block;
          background: url("@/assets/icon.png") no-repeat 0 0;
          background-size: 155px;
          width: 12px;
          height: 8px;
          margin-right: 4px;
        }
      }
    }
    .right-btn {
      width: 40px;
      height: 100%;
      background: url(../assets/播放.png) no-repeat;
      background-size: 50%;
      background-position: 50% 50%;
      position: absolute;
      right: 10px;
      z-index: 1;
      background-color: #fff;
    }
  }
}
</style>